<template>
  <div id="edit-server" v-show="openShow">
    <div id="header">
      <div id="item" class="blue-color"><i class="fas fa-laptop"></i>&nbsp;&nbsp;编辑服务器信息&nbsp;&nbsp;<span class="primary-color">({{serverInfo.server_guid}})</span></div>
      <div id="item" @click="openShow=false"><i class="h-icon-close"></i></div>
    </div>
    <div id="content">
      <Form :label-width="110" :mode="mode" :model="data" :rules="validationRules" ref="form" :top="0.2" showErrorTip>
        <FormItem label="服务器标题" prop="server_hostname">
          <input type="text" v-model="data.server_hostname" placeholder="填写内容" />
        </FormItem>
        <FormItem label="封面图" prop="server_headerimage">
          <input type="text" v-model="data.server_headerimage" placeholder="填写内容" />
        </FormItem>
        <FormItem label="服务器描述" prop="server_description">
          <textarea v-model="data.server_description" rows="3" placeholder="填写内容"></textarea>
        </FormItem>
        <FormItem label="推广链接" prop="server_url">
          <input type="text" v-model="data.server_url" placeholder="填写内容" />
        </FormItem>
        <FormItem label="地图模式">
          <Select v-model="map_mode" placeholder="地图模式" :deletable="false" :datas="mapModeData">
            <!-- <template slot="show" slot-scope="{value}">自定义展示: {{value.title}}</template> -->
            <template slot-scope="{item}" slot="item">
              <div>{{item.title}}</div>
              <div class="des">{{item.other}}</div>
            </template>
          </Select>
        </FormItem>
        <FormItem label="RCON密码" prop="rcon_password">
          <input type="text" v-model="data.rcon_password" placeholder="填写内容" />
        </FormItem>
        <FormItem label="地图URL" v-if="map_mode==1" prop="server_levelurl">
          <input type="text" v-model="data.server_levelurl" placeholder="填写内容" />
        </FormItem>
        <FormItem label="地图大小" prop="server_worldsize" v-if="map_mode==0">
          <input type="text" v-model="data.server_worldsize" placeholder="填写内容" />
        </FormItem>
        <FormItem label="">
          &nbsp;
        </FormItem>
        <FormItem label="地图种子" prop="server_seed" v-if="map_mode==0">
          <input type="text" v-model="data.server_seed" placeholder="填写内容" />
        </FormItem>
      </Form>
      <Loading text="正在保存..." :loading="isLoading"></Loading>
    </div>
    <div id="button">
      <div style="text-align:right;flex:1"><Button style="display:inline-block;" color="primary" @click="submitAsync"><i style="font-size:16px;" class="fas fa-save"></i>&nbsp;&nbsp;保存修改</Button></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openShow: false,
      isLoading: false,
      mode: 'twocolumn',
      serverInfo: {},
      map_mode: 0,
      mapModeData: [{ title: '标准模式', key: 0, other: '使用地图大小和地图种子来创建地图' }, { title: '地图URL', key: 1, other: '使用地图URL创建地图' }],
      data: {
        server_hostname: '测试标题',
        server_description: '',
        server_headerimage: '',
        server_url: '',
        rcon_password: 'a123456',
        server_worldsize: '3750',
        server_seed: '2053713317',
        server_levelurl: '',
      },
      isLoading: false,
      validationRules: {
        required: [
          'server_hostname',
          'rcon_password',
        ],
        int: ['server.worldsize', 'server.seed'],
      }
    }
  },
  mounted: function () {

  },
  methods: {
    openEdit(data) {
      this.serverInfo = data
      let oldInfo = this.serverInfo.configinfo
      this.data = {
        server_hostname: oldInfo.server_hostname,
        server_description: oldInfo.server_description.replace(/\\n/g,'\n'),
        server_headerimage: oldInfo.server_headerimage,
        server_url: oldInfo.server_url,
        rcon_password: oldInfo.rcon_password,
        server_worldsize: oldInfo.server_worldsize,
        server_seed: oldInfo.server_seed,
        server_levelurl: oldInfo.server_levelurl,
      }
      this.openShow = true
    },
    async submitAsync() {
      this.isLoading = true;
      let validResult = this.$refs.form.valid()
      if (validResult.result) {
          this.data.server_description=this.data.server_description.replace(/\n/g,'\\n')
        let ret = await this.$API.editserver({ guid: this.serverInfo.server_guid, map_mode: this.map_mode, config: this.data })
        if (ret.code == 0) {
          this.$Message({ type: 'success', text: ret.msg });
          this.$emit('serverChange', this.data)
          this.openShow=false
        }
        else {
          this.$Message({ type: 'error', text: ret.msg });
        }
        this.isLoading = false
      } else {
        this.isLoading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
#edit-server {
  height: calc(100% - 22px);
  z-index: 1000;
  width: calc(100% - 22px);
  //   background: red;
  background: #fff;
  position: absolute;
  display: flex;
  flex-direction: column;
  //   align-items: center;
  #header {
    //   flex: 1;
    // height: 50px;
    padding: 8px;
    // line-height: 50px;
    display: flex;
    #item {
      color: rgb(45, 173, 143);
      padding: 8px 15px;
      margin: 0 2px;
      border-radius: 4px;
      background: rgba(47, 218, 178, 0.3);
      &:first-child {
        flex: 1;
        background: none;
        // font-weight: bold;
        span{
            user-select: auto;
            font-weight: bold;
        }
      }
      &:last-child {
        cursor: pointer;
        align-self: flex-end;
      }
    }
    // #file-close {
    //   cursor: pointer;
    //   i {
    //     color: rgb(45, 173, 143);
    //     background: rgba(47, 218, 178, 0.3);
    //     padding: 10px;
    //     border-radius: 100px;
    //   }
    // }
  }
  #content {
    overflow: hidden;
    overflow-y: auto;
    // border: solid 1px rgba(0, 0, 0, 0.1);
    // padding: 10px;
    margin: 0 10px;
    padding-top: 0;
    // flex: 1;
    height: calc(100% - 110px);
  }
  #button {
    padding: 10px;
    //   background: red;
    display: flex;
    align-items: center;
  }
}
</style>